import React from 'react'
import { Box, Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'
import HeaderCardInfo from './HeaderCardInfo'
import { useStore } from 'reto'
import User from '@/store/user'


const useStyles = makeStyles({
  root: {
    height: '240px',
    borderRadius: '5px',
    overflow: 'hidden',
    backgroundColor: 'white',
    boxShadow: '5px 10px 15px 2px rgba(0,0,0,0.1)',
    position: 'relative',
    transition: 'box-shadow 0.5s ease-in-out',

    '& .bg': {
      width: '100%',
      height: '100%',
      objectFit: 'cover',
      transition: 'transform 0.2s ease-in-out,filter 0.5s ease-in-out 0.2s;',
    },
    '& .hoverShow': {
      opacity: 0,
      transform: 'translateY(20px)',
      transition: `transform 0.3s ease-in-out
      ,opacity 0.5s ease-in-out`,
    },
    '& .hoverHide': {
      opacity: 1,
      transition: `transform 0.3s ease-in-out
      ,opacity 0.5s ease-in-out`,
    },

    '&:hover': {
      boxShadow: '5px 10px 15px 2px rgba(0,0,0,0.2)',

      '& .bg': {
        transform: 'scale(1.1)',
        filter: 'blur(2px)',
      },
      '& .hoverShow': {
        opacity: 1,
        transform: 'translateY(0)',
      },
      '& .hoverHide': {
        opacity: 0,
      },
    }
  },

  info: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
  },

})


interface IProps {

}

const HeaderCard: React.FC<IProps> = props => {
  const classes = useStyles()
  const userData = useStore(User).user

  return <div
    className={clsx(
      classes.root,
    )}
  >
    <img src={userData?.cardImage} className='bg' />
    <Box
      className={clsx(
        classes.info,
        'hoverHide',
      )}
    >
      <HeaderCardInfo position='bottom' />
    </Box>
    <Box
      className={clsx(
        classes.info,
        'hoverShow',
      )}
    >
      <HeaderCardInfo position='center' />
    </Box>
  </div>
}

export default HeaderCard